{extend name="base" /}
{block name="title"}群组管理{/block}
{block name="head"}
<style>
.mgr .weui_media_appmsg { padding: 4px 10px; }
.mgr .weui_media_appmsg .weui_media_desc { -webkit-line-clamp: 1; }
.mgr .weui_media_appmsg .weui_media_hd { width: 48px; height: 48px; line-height: 48px; margin-right:4px; }
.mgr .weui_media_appmsg .weui_media_bd { text-align:left; }
</style>
{/block}
{block name="body"}
<div class="weui_panel ms-controller mgr" ms-controller="Qunmgr">

  <div class="weui_panel_bd">
    <table class="weui-table" >
      <thead><tr><th>群主</th><th>群号</th><th>人数</th><th>钻石</th><th>操作</th></tr></thead>
      <tbody>
        <tr ms-if="@rows.length<=0"><td colspan="5">Oh~暂无数据!</td></tr>
        <tr ms-if="@rows.length>0" ms-for="(k,v) in @rows">
          <td>
            <div class="weui_media_box weui_media_appmsg">
              <div class="weui_media_hd">
                <img class="weui_media_appmsg_thumb" ms-attr="{src:v.Avatar?v.Avatar:'__STATIC__/agent/dface.png', alt:v.GameID}" />
              </div>
              <div class="weui_media_bd">
                <h4 class="weui_media_title">{{v.NickName}}</h4>
                <p class="weui_media_desc">{{v.GameID}}</p>
              </div>
            </div>
          </td>
          <td><a ms-attr="{href:'{:url('qunmem')}?code='+v.Code}">{{v.Code}}</a></td>
          <td><a ms-attr="{href:'{:url('rclog')}?code='+v.Code}">{{v.TotalMember}}</a></td>
          <td>{{v.RoomCard}}</td>
          <td><a class="weui_btn weui_btn_mini weui_btn_primary" ms-attr="{href:'{:url('qunbpc')}?code='+v.Code}">充值</a></td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="weui_panel_ft" style="padding:0">
    <div class="weui-flex pager">
      <a class="weui-flex-item" ms-on-tap="@tapFirst">首页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapPre">上一页</a>
      <a class="weui-flex-item weui-border-l">{{@total}}#{{@page}}/{{@totalPage}}</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapNext">下一页</a>
      <a class="weui-flex-item weui-border-l" ms-on-tap="@tapEnd">尾页</a>
    </div>
  </div>

</div>
{/block}
{block name="foot"}
<script>
avalon.ready(function () {
  var vm = avalon.define({
    $id: "Qunmgr",
    page: "{$page??1}" * 1, // 当前第几页
    size: "{$size??10}" * 1,  // 每页几条
    total: "{$total??0}" * 1, // 总共几条
    rows: {:json_encode($rows??[], JSON_UNESCAPED_UNICODE)},
    $computed: {
      totalPage: {
        get: function () {
          var max = Math.ceil(this.total / this.size); // 最大页数=向上取整
          max = max > 0 ? max : 1;
          return max;
        }
      }
    },
    ajaxPage: function (page) {
      $.req({
        url: "{:url('qunmgr')}",
        data: {
          page: page
        },
        context: this,
        success: function (resp, status, xhr) {
          avalon.log(resp);
          if (resp.errno == 0) {
            this.page = resp.data.page * 1;
            this.size = resp.data.size * 1;
            this.total = resp.data.total * 1;
            this.rows.removeAll();
            this.rows.pushArray(resp.data.rows);
          }
        }
      });
    },
    tapFirst: function () {
      avalon.log("tapFirst");
      this.ajaxPage(1);
      return false;
    },
    tapPre: function () {
      avalon.log("tapPre");
      var page = this.page - 1;
      page = page > 0 ? page : 1;
      this.ajaxPage(page);
      return false;
    },
    tapNext: function () {
      avalon.log("tapNext");
      var page = this.page + 1;
      page = page > this.totalPage ? this.totalPage : page;
      this.ajaxPage(page);
      return false;
    },
    tapEnd: function () {
      avalon.log("tapEnd");
      this.ajaxPage(this.totalPage);
      return false;
    }
  });
  avalon.scan(document.body);

});
</script>
{/block}